<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>按钮一</button>
    <button>按钮二</button>
    <button>按钮三</button>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
      //   var divs = document.querySelectorAll("div");
      //   divs.forEach(function (div) {
      //     this.remove;
      //   });

      /*  var div = document.querySelectorAll("div");
        div.onclick = function () {
          for (let i = 0; i < div.length; i++) {

        }; */

      var btns = document.querySelectorAll("button");
      var divs = document.querySelectorAll("div");

      btns.forEach(function (item, key) {
        //给每一个item绑定点击事件
        item.onclick = function () {
          //   console.log(111);
          //把点击按钮 相同下标的 div 显示出来 其他的隐藏起来
          divs.forEach(function (div, k) {
            if (k == key) {
              divs[k].style.display = "block";
            } else {
              divs[k].style.display = "none";
            }
          });
        };
      });

      //   var eles = document.body.children;
      //   [...eles].forEach(function (item) {
      //     console.log(item);
      //   });

      //立即执行函数
      (function () {
        console.log(111);
      })();

      (function () {
        console.log(222);
      })();
    </script>
  </body>
</html>
